<template>
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="用户名" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
            <el-input v-model="form.pwd"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    data(){
        return {
            form:{
                name:'',
                pwd:''
            },
            rules:{
                name:[
                    {required:true,message:'用户名不能为空',trigger:'blur'},
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                pwd:[
                    {required:true,message:'密码不能为空',trigger:'blur'}
                ]
            }
        }
    },
    methods:{
        onSubmit(){
            this.$refs.form.validate((valid) => {
                if (valid) {
                    console.log(this.form);
                    this.$http.get('/api/login',{params:this.form}).then((res) => {
                        if(res.data.code === 1){
                            localStorage.setItem('name',this.form.name);
                            this.$router.push({path:'/home'})
                        }
                    })
                } else {
                    alert("输入有误，请重新输入");
                    return false;
                }
            })
        }
    }
}
</script>
